<template>
  <div id="app">
    <!-- <div class="musicicon">
      <img
        src="./assets/img/musicbtn.png"
        :class="[isOff ? '' : 'rotateimg']"
        @click="changeOn"
      />
    </div> -->
    <router-view />
    <!-- <audio
      id="audio"
      :src="require('./assets/media/bg.mp3')"
      preload
      controls
      loop
      hidden
    ></audio> -->
  </div>
</template>

<script>
// 阻止页面的滑动默认事件
// document.body.addEventListener(
//   "touchmove",
//   function (e) {
//     e.preventDefault(); // 阻止默认的处理方式(阻止下拉滑动的效果)
//   },
//   { passive: false }
// ); // passive 参数不能省略，用来兼容ios和android
import wx from "weixin-js-sdk";
export default {
  name: "App",
  data() {
    return {
      isOff: true,
      height: window.innerHeight, //页面高度
    };
  },
  created() {
    //刷新回到默认页面
    // if (this.$route.path !== "/") {
    //   this.$router.replace("/");
    // }
    //分享
    // this.wxShare();
  },
  mounted() {
    // console.log(window.innerWidth + " " + window.innerHeight);
    //禁止分享方式2
    // document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
    //   // 通过下面这个API隐藏右上角按钮
    //   WeixinJSBridge.call("hideOptionMenu");
    // });

    // 自动播放音乐效果，解决微信自动播放问题
    // document.addEventListener("touchstart", this.audioAutoPlay, false);
    // document.addEventListener("WeixinJSBridgeReady", this.audioAutoPlay, false);
    // let oAudio = document.querySelector("#audio");
    // oAudio.onended = function () {
    //   //播放完毕，重新循环播放
    //   oAudio.load();
    //   oAudio.play();
    // };
    //防止安卓手机软键盘弹起式撑起页面
    const originalHeight =
      document.documentElement.clientHeight || document.body.clientHeight;
    window.onresize = () => {
      return (() => {
        //键盘弹起与隐藏都会引起窗口的高度发生变化
        const resizeHeight =
          document.documentElement.clientHeight || document.body.clientHeight;
        if (resizeHeight - 0 < originalHeight - 0) {
          //当软键盘弹起，在此处操作
          // console.log("进入到软键盘弹起=========");
          document
            .querySelector("body")
            .setAttribute("style", "height:" + originalHeight + "px;");
          this.scrollerHeight = resizeHeight;
        } else {
          //当软键盘收起，在此处操作
          // console.log("进入到软键盘收起=========");
          document.querySelector("body").setAttribute("style", "height:100%;");
          this.scrollerHeight = "100%";
        }
      })();
    };
    //获取小程序携带过来的参数
    // const url = window.location.href;
    // alert("小程序参数s：" + this.getUrlParams(url).s);
  },
  methods: {
    changeOn() {
      let oAudio = document.querySelector("#audio");
      if (this.isOff) {
        oAudio.play(); //让音频文件开始播放
      } else {
        oAudio.pause(); //让音频文件暂停播放
      }
      this.isOff = !this.isOff;
    },
    audioAutoPlay() {
      let audio = document.getElementById("audio");
      this.isOff = false;
      audio.play();
      document.removeEventListener("touchstart", this.audioAutoPlay);
    },
    //分享
    async wxShare() {
      let res = await this.$http.post("/getUserStatusInfo");
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      this.$http
        .post("https://www.mahelei.com/index.php/Gm/Wechat/share", { url })
        .then((res) => {
          let data = res.data;
          wx.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: [
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "onMenuShareQQ",
              "onMenuShareWeibo",
              "onMenuShareQZone",
            ],
          });
        });
      wx.ready(() => {
        var shareData = {
          title: "爱德王子318摩旅打卡，超5000份礼品，等你来赢",
          desc: "价值2.2万元Klim骑行套装，高端头盔，定制尾箱等超多好礼，点击立即参与→",
          link:
            "https://www.mahelei.com/index.php/Advance2024/Index/index/s/" +
            res.data.data.s,
          imgUrl: "https://cdn.mahelei.com/Advance/318/share.jpg",
          success: () => {},
        };
        wx.onMenuShareTimeline(shareData);
        wx.onMenuShareAppMessage(shareData);
        wx.onMenuShareQQ(shareData);
        wx.onMenuShareWeibo(shareData);
        wx.onMenuShareQZone(shareData);
      });
    },
    getUrlParams(url) {
      // 先根据indexOf获取？的索引
      const len = url.indexOf("?");
      // substr截取？之后的全部字符串
      const str = url.substr(len + 1);
      // 有三组数据，根据&，将其分割为数组中的三个字符串
      const arr = str.split("&");
      // 创建一个空对象，用于存放处理好的key：value
      let obj = {};
      // 通过循环的方式对arr中的字符串处理
      for (let key in arr) {
        // console.log(arr[key]);
        // l为=的索引
        let l = arr[key].indexOf("=");
        // k为将要传入obj对象中对应的key值
        let k = arr[key].slice(0, l);
        // v为将要传入obj对象中对应的value值
        let v = arr[key].slice(l + 1).toString();
        // 向空对象中添加属性
        obj[k] = v;
      }
      // console.log(obj);
      return obj;
    },
  },
};
</script>

<style lang="less">
@font-face {
  font-family: "ALIBABAPUHUITI-2-55-REGULAR";
  font-weight: normal;
  src: url("https://cdn.mahelei.com/Advance/318/fonts/ALIBABAPUHUITI-2-55-REGULAR.OTF");
}
@font-face {
  font-family: "AlibabaPuHuiTi-2-85-Bold";
  font-weight: bold;
  src: url("https://cdn.mahelei.com/Advance/318/fonts/AlibabaPuHuiTi-2-85-Bold.ttf");
}
@font-face {
  font-family: "Alimama_ShuHeiTi_Bold";
  font-weight: bold;
  src: url("https://cdn.mahelei.com/Advance/318/fonts/Alimama_ShuHeiTi_Bold.ttf");
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* 手机点击屏幕时，防止出现的灰块 */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#app {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 750px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
  color: #000;
  font-family: "ALIBABAPUHUITI-2-55-REGULAR";
  font-weight: normal;
  font-size: 14px;
  overflow: hidden;
}
.musicicon {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  width: 55px;
  height: 55px;
  z-index: 9;
  border-radius: 50%;
  overflow: hidden;
  img {
    display: block;
    width: 100%;
  }
  .rotateimg {
    -webkit-animation: rotateimgani 3s linear infinite;
    animation: rotateimgani 3s linear infinite;
  }
  @keyframes rotateimgani {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes rotateimgani {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}
.box {
  position: relative;
  width: 100%;
  height: 100%;
  p {
    margin: 0;
  }
  img {
    display: block;
  }
  .logobox {
    width: 100%;
    margin-top: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    img:first-child {
      width: 22%;
    }
    img:last-child {
      width: 29%;
      margin-right: 1rem;
    }
  }
  .backbox {
    position: absolute;
    left: 0;
    align-self: flex-start;
    top: 2rem;
    width: 165px;
    height: 76px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .btnbox {
    width: 400px;
    height: 76px;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
    }
  }
}
//返回首页
.backtoidxbox {
  position: relative;
  margin-top: 3rem;
  width: 284px;
  height: 90px;
  overflow: hidden;
  align-self: flex-start;
  img {
    display: block;
    width: 100%;
  }
}
// 弹窗
.tkbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9;
  // 规则
  .tkcontainbox {
    width: 90%;
    height: 80%;
    background: #e9e7e6;
    border-radius: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: center;
    img {
      width: 85%;
      margin: 4rem auto 6rem auto;
    }
    .ruleinfo {
      width: 88%;
      margin: 0 auto;
      font-size: 1.5rem;
      text-align: left;
      padding: 2rem 0 5rem 0;
      line-height: 40px;
      p {
        color: #000;
      }
      .rtitle {
        padding: 2rem 0;
        text-align: center;
        font-size: 2rem;
        font-weight: bolder;
      }
      .bold {
        font-weight: bolder;
      }
    }
  }
  .close {
    width: 12%;
    margin-top: -3rem;
    z-index: 2;
  }

  // 弹窗
  .tk_container {
    position: relative;
    width: 658px;
    height: 582px;
    background: url("./assets/img/dhbox.png") no-repeat;
    background-size: 100% 100%;
    .title {
      margin-top: 1.2rem;
      width: 476px;
      height: 90px;
      font-family: "Alimama_ShuHeiTi_Bold";
      font-size: 4rem;
      text-align: center;
      line-height: 90px;
      color: #404040;
    }
    .tk_infobox {
      width: 100%;
      height: 386px;
      border-radius: 2rem;
      margin-top: 1rem;
      .tk_info {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 无数据
.nodata {
  p {
    font-size: 1.8rem;
    color: #757575;
    padding: 1rem 0;
  }
}
// 支付状态弹窗
.pay_status_box {
  .tk_cont {
    width: 658px;
    height: 519px;
    background: url("@/assets/img/tk_bg.png") no-repeat;
    background-size: 100% 100%;
    .tk_cont_info {
      width: calc(100% - 2rem);
      height: calc(100% - 8rem);
      padding: 4rem 0 0 1rem;
      .tk_title {
        font-family: "Alimama_ShuHeiTi_Bold";
        font-size: 3.5rem;
        color: #404040;
        padding-top: 2rem;
      }
    }
  }
  .btn_order {
    margin-top: 4rem;
  }
}

// 抽奖结果弹窗公共样式
.cjresult_tkbox {
  overflow-y: scroll;
  .tkcontainer {
    height: auto;
    .tk_container {
      .tk_infobox {
        .jpbox {
          width: 568px;
          height: 160px;
          background: url("@/assets/img/getbg.png") no-repeat top center;
          background-size: 100% 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          color: #000000;
          padding-bottom: 1rem;
          .jpimg {
            position: relative;
            z-index: 2;
            width: 122px;
            margin-left: 1.5rem;
          }
          .jpdesbox {
            width: 378px;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;
            margin-left: 1rem;
            p {
              font-size: 1.6rem;
            }
          }
        }
      }
    }
  }
  .cfmbtnbox {
    margin-top: 2rem;
  }
  .msgtip {
    margin-top: 2rem;
    display: flex;
    max-width: 80%;
    p {
      color: #ffffff;
      font-size: 1.2rem;
      line-height: 1.6;
    }
  }
}
.clmcenter {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.clmstart {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
.bg {
  background: url("./assets/img/bg.jpg") no-repeat top center;
  background-size: cover;
}
.btnani {
  animation: btnanito 2s linear infinite;
}
@keyframes btnanito {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* 灰度 */
.gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -webkit-filter: grayscale(1);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
/*select和input设置相同大小*/
select,
input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-style: none;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
select:focus,
input:focus {
  outline: 0;
}
select {
  // background: #ffffff url(./assets/img/icon.png) no-repeat right center;
  // background-size: 5% auto !important;
  // background-position: right 3% top 1rem;
  text-align: center;
  text-align-last: center;
}
select::-ms-expand {
  display: none;
}
/*去除a标签点击时出现闪现黑背景  ——手机端*/
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus,
img {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: none;
  text-decoration: none;
}
/* vant样式修改 */
.van-toast {
  word-break: keep-all !important;
}
.van-toast,
.van-dialog__message,
.van-button__text {
  width: auto !important;
  font-size: 1.8rem !important;
  padding: 20px !important;
}
.van-toast__text {
  padding: 1rem;
  line-height: 36px;
}
.van-loading__spinner {
  width: 40px !important;
  height: 40px !important;
}
.van-dialog {
  width: 600px !important;
}
.van-dialog__cancel,
.van-dialog__confirm {
  height: 90px !important;
}
.van-dialog__content--isolated {
  min-height: 150px !important;
}
.van-dialog__message {
  line-height: 36px !important;
}
</style>
